<template>
  <div class="main">
    <h2 style="text-align: center;line-height: 1.5;color: #2980B9;">高等教育自学考试信息提交表</h2>
    <div :style="backgroundImage">
      <div class="header1">
        <p style="text-align: justify;">
          高等学历教育高升专、专升本是我国高等教育体系的重要组成部分，是以个人学习、社会助学和国家考试相结合的高等教育形式，是以提升考生综合能力为宗旨，向国家教育事业发展和人才储备提供保障。</p>
        <p>
          毕业时由相应专业主考院校和主考委联合颁发毕业证书、学士学位证书。国家正规学历，国际认可，享受普通高等院校毕业生同等待遇。毕业证书经由电子注册，中国高等教育学生信息网（http://www.chsi.com.cn）官网查询。</p>
      </div>
      <p class="header2">主考单位：全国高等教育自学考试委员会 <br>
        考籍管理：省(区)级自学考试委员会办公室<br>
        教育形式：高等教育本、专科学历教育<br>
        学历查询：国家认可，中国高等教育学生信息网（学信网）可查<br>
        招生层次：高升专、专升本、第二学位<br>
        学习形式：网络学习、不限地点<br></p>
    </div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px"
             label-position="top">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="真实姓名，中文" :maxlength="8" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio v-model="formData.sex" label="男">男</el-radio>
        <el-radio v-model="formData.sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入手机号码" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="身份证" prop="idCard">
        <el-input v-model="formData.idCard" placeholder="18位身份证号码" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="教育程度" prop="education">
        <el-select v-model="formData.education" placeholder="请选择教育程度" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in educationOptions" :key="index" :label="item.label"
                     :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="户口性质" prop="householdRegister">
        <el-radio v-model="formData.householdRegister" label="城镇">城镇</el-radio>
        <el-radio v-model="formData.householdRegister" label="非城镇">非城镇</el-radio>
      </el-form-item>
      <el-form-item label="报考地区" prop="province">
        <el-input v-model="formData.province" placeholder="请选择报考地区" clearable :style="{width: '100%'}" @focus="popupIsShow = true"></el-input>
      </el-form-item>
      <el-form-item label="毕业证邮寄地址" prop="address">
        <el-input v-model="formData.address" placeholder="请输入毕业证邮寄地址" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="微信" prop="weChat">
        <el-input v-model="formData.weChat" placeholder="请输入微信" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="报考院校" prop="intentionCollege">
        <el-input v-model="formData.intentionCollege" placeholder="请输入报考院校" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="报考专业" prop="intentionProfessional">
        <el-input v-model="formData.intentionProfessional" placeholder="请输入报考专业" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
<!--      <el-form-item label="身份证正面照" prop="idCardPositive" required>-->
<!--        <image-upload v-model="formData.idCardPositive" :limit="1"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="身份证背面照" prop="idCardNegative" required>-->
<!--        <image-upload v-model="formData.idCardNegative" :limit="1"/>-->
<!--      </el-form-item>-->
      <el-form-item label="毕业照片" prop="graduationPhoto" required>
        <image-upload v-model="formData.graduationPhoto" :limit="1"/>
      </el-form-item>
      <el-form-item label="电子版照片" prop="electronicPhotos" required>
        <image-upload v-model="formData.electronicPhotos" :limit="5"/>
      </el-form-item>
      <el-form-item label="" prop="field123">
        <el-checkbox-group v-model="formData.field123" size="medium">
          <el-checkbox v-for="(item, index) in field123Options" :key="index" :label="item.value"
                       :disabled="item.disabled">{{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <div class="zhuyi">
        <p>报名注意事项:</p>
        <ul>
          <li>报名提供的资料必须齐全，且真实有效，对考生提供虚假资料的不予报名</li>
<!--          <li>2.本人已如实了解相应情况，并且自愿报读，在招生宣传过程中没有夸大和隐瞒的情况</li>-->
<!--          <li>3.本人已知只有配合老师安排，通过所有科目考生可以获得文凭，没有给我承诺包过或者包拿毕业证</li>-->
        </ul>
      </div>
      <el-form-item>
        <el-button style="width: 100%" type="primary" @click="submitForm" round>确认提交</el-button>
      </el-form-item>
    </el-form>
    <van-popup v-model="popupIsShow" position="bottom" :style="{ height: '30%' }">
      <van-area title="城市选择" item-height="30%" :area-list="areaList" @confirm="confirm"
                @cancel="popupIsShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {addInformation, updateInformation} from "@/api/system/information";
import cityList from "@/utils/city";

export default {
  name: "PersonnelInformation",
  components: {},
  props: [],
  data() {
    return {
      formData: {
        id: undefined,
        name: undefined,
        phone: undefined,
        email: undefined,
        idCard: '',
        education: '高中',
        province: '',
        address: undefined,
        weChat: undefined,
        intentionCollege: '',
        intentionProfessional: undefined,
        idCardPositive: '',
        idCardNegative: '',
        graduationPhoto: '',
        electronicPhotos: '',
        field123: [],
        householdRegister: '',
        sex: ''
      },
      rules: {
        name: [{
          required: true,
          message: '真实姓名，中文',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入手机号码',
          trigger: 'blur'
        }],
        email: [{
          required: true,
          message: 'xxxxxx@email.com',
          trigger: 'blur'
        }],
        idCard: [{
          required: true,
          message: '18位身份证号码',
          trigger: 'blur'
        }],
        education: [{
          required: true,
          message: '请选择教育程度',
          trigger: 'change'
        }],
        province: [{
          required: true,
          message: '请选择省份',
          trigger: 'change'
        }],
        sex: [{
          required: true,
          message: '请选择性别',
          trigger: 'change'
        }],
        householdRegister: [{
          required: true,
          message: '请选择户口性质',
          trigger: 'change'
        }],
        address: [{
          required: true,
          message: '请输入通讯地址',
          trigger: 'blur'
        }],
        weChat: [{
          required: true,
          message: '请输入微信',
          trigger: 'blur'
        }],
        intentionCollege: [{
          required: true,
          message: '请选择报考院校',
          trigger: 'change'
        }],
        intentionProfessional: [{
          required: true,
          message: '请输入报考专业',
          trigger: 'blur'
        }],
        field123: [{
          required: true,
          type: 'array',
          message: '请同意条款！',
          trigger: 'change'
        }],
        // idCardPositive: [{required: true, message: '请上传身份证人像面', trigger: 'change'},],
        // idCardNegative: [{required: true, message: '请上传身份证国徽面', trigger: 'change'},],
        electronicPhotos: [{required: true, message: '请上传电子版照片', trigger: 'change'},],
        graduationPhoto: [{required: true, message: '请上传毕业照片', trigger: 'change'},],
      },
      educationOptions: [{
        "label": "高中",
        "value": "高中"
      }, {
        "label": "大专",
        "value": "大专"
      }, {
        "label": "本科",
        "value": "本科"
      }],
      provinceOptions: [{
        "label": "北京市",
        "value": "北京市"
      }, {
        "label": "上海市",
        "value": "上海市"
      }],
      field117Options: [{
        "label": "河北经贸大学",
        "value": 1
      }, {
        "label": "天津师范大学",
        "value": 2
      }],
      field123Options: [{
        "label": "本人已核实，确认信息真实无误",
        "value": 1
      }],
      areaList: cityList,
      popupIsShow: false,
      backgroundImage: {
        background: 'url(' + require('@/assets/images/255b10432cce21e51902b13f296cefd.png') + ') no-repeat center 0',
        height: '100%',
        width: '100%',
        backgroundSize: '71%'
      }
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          if (this.formData.id != null) {
            updateInformation(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInformation(this.formData).then(response => {
              this.$modal.msgSuccess("提交成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field119BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    field120BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    field121BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    field122BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    confirm(city) {
      const province = city[0].name + ' - '
      const urban = city[1].name + ' - '
      const county = city[2].name
      this.formData.province = province + urban + county
      this.popupIsShow = false
      console.log(city)
    },
  }
}
</script>

<style scoped>
.main {
  padding: 0 30px;
}

.header1 {
  font-family: "黑体", serif;
}

.header1 p {
  text-indent: 2em;
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.header2 {
  font-weight: bold;
  font-family: "黑体", serif;
}

.zhuyi {
  font-size: 16px;
  color: #2980B9;
}

.zhuyi ul li {
  list-style: none;
  font-family: "黑体", serif;
}

.zhuyi ul {
  padding-left: 0;
}
>>> .el-form--label-top .el-form-item__label{
  padding: 0;
}


</style>
